<template>
  <div class="app-container">
    <PlatformHeader />
    <div class="main-container" :style="{ height: `calc(100vh - 72px)` }">
      <!-- 左侧面板 - 地区选择树 -->
      <div
        class="left-panel"
        :class="{ 'hidden': leftPaneSize === 0 }"
        :style="{ width: `${leftPaneSize}%` }"
      >
        <div class="head-container">
          <el-input
            v-model="deptName"
            placeholder="请输入机构名称"
            clearable
            size="small"
            prefix-icon="el-icon-search"
            style="margin-bottom: 20px"
          />
        </div>
        <div class="head-container">
          <el-tree
            :data="deptOptions"
            :props="defaultProps"
            :expand-on-click-node="false"
            :filter-node-method="filterNode"
            ref="tree"
            node-key="id"
            default-expand-all
            highlight-current
            @node-click="handleNodeClick"
          />
        </div>
      </div>

      <!-- 右侧主内容区 -->
      <div class="right-panel">
        <!-- 显示/隐藏左侧面板的按钮 -->
        <button
          class="toggle-btn"
          @click="toggleLeftPane"
          :style="{ left: leftPaneSize === 0 ? '10px' : `${leftPaneSize}%` }"
        >
          <i class="el-icon-s-fold" v-if="leftPaneSize > 0"></i>
          <i class="el-icon-s-unfold" v-else></i>
        </button>

        <el-col style="height: 100%;display: flex;flex-direction: column;padding: 10px;padding-top: 20px">
          <el-form  :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="100px" class="search-form custom-form" :rules="formRules">
            <el-form-item label="机构" prop="deptId" required label-width="50px">
              <el-input
                v-model="selectedNodeInfo"
                placeholder="请从左侧选择机构"
                readonly
                clearable
                style="width: 142px;background-color: transparent;"
                @focus="handleInputFocus"
              />
            </el-form-item>


            <!-- 通过状态筛选 -->
            <el-form-item label="状态" prop="passStatus" label-width="48px">
              <el-select v-model="queryParams.passStatus" placeholder="请选择"  clearable style="width: 94px" popper-class="custom-select-dropdown">
                <el-option
                  v-for="item in passStatusOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>

            <!-- 修改为日期范围选择器 -->
            <el-form-item label="日期" prop="dateRange" required label-width="50px">
              <el-date-picker
                popper-class="custom-select-dropdown"
                v-model="queryParams.dateRange"
                type="daterange"
                value-format="yyyy-MM-dd"
                range-separator="-"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                style="width: 212px"
                :picker-options="pickerOptions"
                @change="handleDateChange"
              />
            </el-form-item>
            <!-- 性别筛选 -->
            <el-form-item label="性别" prop="gender" label-width="40px">
              <el-select
                popper-class="custom-select-dropdown"
                v-model="queryParams.gender" placeholder="请选择性别" clearable style="width: 80px">
                <el-option
                  v-for="item in genderOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
            <!-- 人群筛选 -->
            <el-form-item label="人群" prop="populationType" required label-width="50px">
              <el-select
                popper-class="custom-select-dropdown"
                v-model="queryParams.populationType"
                placeholder="请选择"
                clearable
                style="width: 96px"
                @change="handlePopulationChange"
              >
                <el-option
                  v-for="item in populationOptions"
                  :key="item.id"
                  :label="item.peopletypename"
                  :value="item.id"
                />
              </el-select>
            </el-form-item>




            <!-- 动态年龄组筛选 -->
            <el-form-item label="年龄组" prop="ageGroup" label-width="60px">
              <el-select
                popper-class="custom-select-dropdown"
                v-model="queryParams.ageGroup"
                placeholder="请选择"
                clearable
                style="width: 122px"
                :disabled="!queryParams.populationType"
                @change="handleAgeGroupChange"
              >
                <el-option
                  v-for="item in ageGroupOptions"
                  :key="item.id"
                  :label="item.peaplegroupname"
                  :value="item.id"
                />
              </el-select>
            </el-form-item>

            <!-- 动态城乡工作种类筛选 -->
            <el-form-item label="城乡" prop="urbanRuralType" label-width="40px">
              <el-select
                popper-class="custom-select-dropdown"
                v-model="queryParams.urbanRuralType"
                placeholder="请选择城乡工作种类"
                clearable
                style="width: 164px"
                :disabled="!queryParams.populationType"
              >
                <el-option
                  v-for="item in filteredUrbanRuralOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>

            <el-form-item label="查询" prop="fuzzylookup" label-width="40px">
              <el-input
                v-model="queryParams.fuzzylookup"
                placeholder="姓名或身份证"
                clearable
                style="width: 210px;background-color: transparent;"
              />
            </el-form-item>
            <el-form-item>
              <el-button class="search-btn action-btn" type="primary" icon="el-icon-search" size="mini" @click="handleQuery"  :disabled="!isFormValid">搜索</el-button>
              <el-button class="reset-btn action-btn" icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
            </el-form-item>
          </el-form>

          <!-- 添加表格父级容器，设置flex:1 -->
          <div class="table-container">
            <el-table v-loading="loading" :data="testPeopleList" @selection-change="handleSelectionChange" class="custom-table">
              <el-table-column label="通过" align="center" prop="ispassscreening">
                <template #default="scope">
                  <span v-if="scope.row.ispassscreening === 1" style="color: #00ffb9;font-size: 20px;">✓</span>
                  <span v-else-if="scope.row.ispassscreening === 0" style="color: red;font-size: 30px;">×</span>
                  <span v-else>-</span>
                </template>
              </el-table-column>
              <el-table-column label="身份证号" align="center" prop="idcard" />
              <el-table-column label="姓名" align="center" prop="realname" />
              <el-table-column label="性别" align="center" prop="sex">
              </el-table-column>
              <el-table-column label="测试年龄" align="center" prop="testage"  />
              <el-table-column label="城乡工作种类" align="center" prop="towncountry" />
              <el-table-column label="测试点" align="center" prop="mechanismname" />
              <el-table-column label="问卷" align="center" prop="isQuestion">
                <template #default="scope">
                  <span v-if="scope.row.isQuestion == 1" style="color: #00ffb9;font-size: 20px;">✓</span>
                  <span v-else-if="scope.row.isQuestion == 0" style="color: red;font-size: 30px;">×</span>
                  <span v-else>-</span>
                </template>
              </el-table-column>
              <el-table-column label="操作" align="center" class-name="small-padding fixed-width" >
                <template #default="scope">
                  <el-button
                    size="mini"
                    type="text"
                    icon="el-icon-view"
                    @click="handleDetail(scope.row)"
                  >详情</el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>

          <!-- 分页组件 -->
          <pagination
            v-show="total > 0"
            :total="total"
            :page.sync="queryParams.pageNum"
            :limit.sync="queryParams.pageSize"
            @pagination="getList"
          />
        </el-col>
      </div>

      <!-- 详情弹窗 -->
      <el-dialog
        v-dialog-drag
        :visible.sync="detailDialogVisible"
        width="50%"
        top="5vh"
        custom-class="detail-dialog custom-dialog"
        :close-on-click-modal="false"
        :close-on-press-escape="false"
      >
        <div class="detail-content">
          <div class="basic-info">
            <div class="info-item" style="overflow: hidden">
              <span class="info-label">姓名：</span>
              <span class="info-value">{{ detailData.name }}</span>
            </div>
            <div class="info-item">
              <span class="info-label">性别：</span>
              <span class="info-value">{{ detailData.gender }}</span>
            </div>
            <div class="info-item">
              <span class="info-label">年龄：</span>
              <span class="info-value">{{ detailData.age }}</span>
            </div>
            <!--            <div class="info-item">
                          <span class="info-label">测试点：</span>
                          <span class="info-value">{{ detailData.testSite }}</span>
                        </div>-->
          </div>

          <div class="table-scroll-container">
            <el-table
              :data="detailData.items"
              border
              style="width: 100%"
              height="calc(70vh - 100px)"
              :header-cell-style="{background: '#f7e797', color: '#606266', fontWeight: 'bold'}"
            >
              <el-table-column
                prop="title"
                label="项目名称"

                align="center"
              />
              <el-table-column
                prop="value"
                label="测试值"

                align="center"
              />
              <el-table-column
                prop="check"
                label="校验状态"

                align="center"
              >
                <template #default="{row}">
                  <el-tag
                    :type="row.check === '通过' ? 'success' : 'danger'"
                    size="medium"
                  >
                    {{ row.check }}
                  </el-tag>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </div>

        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="detailDialogVisible = false">关 闭</el-button>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import { deptTreeSelect } from "@/api/system/user";
import PlatformHeader from '../../../components/PlatformHeader/index.vue';
import { getPeopletypelist, getPeoplegroup } from "../../../api/monitormanage/indicator";
import { getqualitycontrol, getqualityresult } from "@/api/monitormanage/testpeoplelog";
import { getUserProfile } from "@/api/system/user";
export default {
  name: "Monitordata",
  components: { PlatformHeader },
  data() {
    const validateDateRange = (rule, value, callback) => {
      if (!value || value.length !== 2) {
        callback(new Error('请选择完整的日期范围'));
      } else {
        const startDate = new Date(value[0]);
        const endDate = new Date(value[1]);
        if (startDate.getFullYear() !== endDate.getFullYear()) {
          callback(new Error('开始日期和结束日期必须在同一年内'));
        } else {
          callback();
        }
      }
    };
    // 获取默认日期范围
    const getDefaultDateRange = () => {
      const today = new Date();
      const currentYear = today.getFullYear();
      const startDate = `${currentYear}-01-01`;
      const endDate = today.toISOString().split('T')[0];
      return [startDate, endDate];
    };

    const defaultRange = getDefaultDateRange();
    return {
      leftPaneSize: 0, // 左侧面板占16%宽度
      deptName: '', // 地区搜索关键词
      selectedNodeInfo: '', // 选中的地区信息
      deptOptions: undefined, // 地区树形数据
      defaultProps: {
        children: "children",
        label: "label"
      },
      startYear: null, // 初始化 startYear

      // 遮罩层
      loading: false,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 表格数据
      testPeopleList: [],
      // 通过状态选项
      passStatusOptions: [
        { value: '全部', label: '全部' },
        { value: '通过', label: '通过' },
        { value: '未通过', label: '未通过' }
      ],
      // 人群选项 - 从API获取
      populationOptions: [],
      // 年龄组选项 - 从API获取
      ageGroupOptions: [],
      // 性别选项
      genderOptions: [
        { value: '', label: '全部' },
        { value: '男', label: '男' },
        { value: '女', label: '女' }
      ],
      // 所有城乡工作种类选项
      allUrbanRuralOptions: {
        '全部': [{ value: '全部', label: '全部' }],
        '幼儿': [
          { value: '全部', label: '全部' },
          { value: '农村幼儿', label: '农村幼儿' },
          { value: '城镇幼儿', label: '城镇幼儿' }
        ],
        '成年': [
          { value: '全部', label: '全部' },
          { value: '城镇体力劳动者', label: '城镇体力劳动者' },
          { value: '城镇非体力劳动者', label: '城镇非体力劳动者' },
          { value: '农民', label: '农民' }
        ],
        '老年': [
          { value: '全部', label: '全部' },
          { value: '农村老年人', label: '农村老年人' },
          { value: '城镇老年人', label: '城镇老年人' }
        ]
      },
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        deptId: null,
        passStatus: '全部',
        dateRange: defaultRange,
        startDate: defaultRange[0],
        endDate: defaultRange[1],
        populationType:  'all',
        ageGroup: '全部',
        urbanRuralType: '全部',
        gender: '',
        ageMin: null,
        ageMax: null,
        fuzzylookup: '' // 新增模糊查询参数
      },
      // 表单验证规则
      formRules: {
        deptId: [
          { required: true, message: '请选择机构', trigger: ['change', 'blur'] }
        ],
        dateRange: [
          { validator: validateDateRange, trigger: ['change', 'blur']  }
        ],
        populationType: [
          { required: true, message: '请选择人群分类', trigger: ['change', 'blur']  }
        ],
        fuzzylookup: [
          {
            validator: (rule, value, callback) => {
              // 身份证号验证正则（支持15位和18位）
              const idCardPattern = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/;

              // 如果为空或符合身份证格式或看起来像姓名（中文字符），则通过验证
              if (!value || idCardPattern.test(value) || /^[\u4e00-\u9fa5]+$/.test(value)) {
                callback();
              } else {
                callback(new Error('请输入有效的姓名(中文)或身份证号'));
              }
            },
            trigger: ['change', 'blur']
          }
        ]
      },
      // 日期选择器配置
      pickerOptions: {
        disabledDate: (time) => {
          // 如果没有选择开始日期或者已经清除了选择，只禁用未来日期
          if (!this.startYear) {
            return time.getTime() > Date.now();
          }

          // 如果已经选择了开始日期，限制只能选择同一年份
          const timeYear = time.getFullYear();
          return time.getTime() > Date.now() || timeYear !== this.startYear;
        },
        onPick: ({ maxDate, minDate }) => {
          if (minDate) {
            // 保存选中的开始日期年份
            this.startYear = minDate.getFullYear();
          } else {
            // 如果没有选择日期，清除年份限制
            this.startYear = null;
          }
        },
        shortcuts: [{
          text: '最近一周',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近一个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近三个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
            picker.$emit('pick', [start, end]);
          }
        },{
          text: '本年至今', //
          onClick(picker) {
            const end = new Date();
            const start = new Date(end.getFullYear(), 0, 1);
            picker.$emit('pick', [start, end]);
          }
        }]
      },

      // 详情弹窗相关数据
      detailDialogVisible: false,
      detailData: {
        name: '',
        idCard: '',
        gender: '',
        age: '',
        testSite: '',
        items: []
      }
    };
  },
  computed: {
    isFormValid() {
      return this.queryParams.deptId && this.queryParams.dateRange && this.queryParams.populationType;
    },
    // 根据选择的人群过滤城乡工作种类选项
    filteredUrbanRuralOptions() {
      if (!this.queryParams.populationType) {
        return [{ value: '全部', label: '全部' }];
      }

      const selectedPopulation = this.populationOptions.find(item => item.id === this.queryParams.populationType);
      const populationName = selectedPopulation ? selectedPopulation.peopletypename : '';

      if (populationName.includes('幼儿')) {
        return this.allUrbanRuralOptions['幼儿'];
      } else if (populationName.includes('成年')) {
        return this.allUrbanRuralOptions['成年'];
      } else if (populationName.includes('老年')) {
        return this.allUrbanRuralOptions['老年'];
      }

      return [{ value: '全部', label: '全部' }];
    }
  },
  watch: {
    deptName(val) {
      this.$refs.tree.filter(val);
    },
    'queryParams.populationType'(newVal) {
      if (newVal) {
        const selectedPopulation = this.populationOptions.find(item => item.id === newVal);
        if (selectedPopulation) {
          this.queryParams.ageMin = selectedPopulation.peopleagemin;
          this.queryParams.ageMax = selectedPopulation.peopleagemax;
          this.getAgeGroups(newVal);
        }
      } else {
        this.queryParams.ageGroup = null;
        this.ageGroupOptions = [];
        this.queryParams.ageMin = null;
        this.queryParams.ageMax = null;
      }
    }
  },
  methods: {
    /** 查询机构下拉树结构 */
    getDeptTree() {
      deptTreeSelect().then(response => {
        this.deptOptions = response.data;
        // console.log(response.data)
        this.queryParams.deptId = response.data[0].id
        this.selectedNodeInfo = response.data[0].label
        // 确保数据加载完成后执行搜索
        this.$nextTick(() => {
          this.handleQuery();
        });
      });
    },

    /** 获取人群分类列表 */
    getPopulationTypes() {
      getPeopletypelist().then(response => {
        // 添加"全部"选项
        this.populationOptions = [{ id: 'all', peopletypename: '全部' }, ...response];
      });
    },

    /** 获取年龄组列表 */
    getAgeGroups(peopleTypeId) {
      if (peopleTypeId === 'all') {
        // 如果选择了"全部"，则获取所有年龄组
        this.ageGroupOptions = [{ id: 'all', peaplegroupname: '全部' }];
        this.queryParams.ageGroup = 'all';
        return;
      }

      getPeoplegroup(peopleTypeId).then(response => {
        const allAgeGroup = {
          id: 'all',
          peaplegroupname: '全部',
          agemin: this.populationOptions.find(item => item.id === peopleTypeId)?.peopleagemin,
          agemax: this.populationOptions.find(item => item.id === peopleTypeId)?.peopleagemax
        };
        this.ageGroupOptions = [allAgeGroup, ...response];
        this.queryParams.ageGroup = 'all';
        this.handleAgeGroupChange('all');
      });
    },

    /** 获取表格数据 */
    getList() {
      this.loading = true;
      console.log(this.queryParams)
      const params = {
        deptid: this.queryParams.deptId,
        starttime: this.queryParams.startDate,
        endtime: this.queryParams.endDate,
        year: this.queryParams.startDate ? this.queryParams.startDate.substring(0, 4) : null,
        ageMin: this.queryParams.ageMin,
        ageMax: this.queryParams.ageMax,
        //sex: this.queryParams.gender === '男' ? 1 : (this.queryParams.gender === '女' ? 2 : null),
        sex: this.queryParams.gender,
        towncountry:this.queryParams.urbanRuralType=== '全部' ? null : this.queryParams.urbanRuralType,
        peopletypeid: this.queryParams.populationType === 'all' ? null : this.queryParams.populationType,
        limit: this.queryParams.pageSize,
        page: this.queryParams.pageNum
      };

      // 添加通过状态筛选
      if (this.queryParams.passStatus === '通过') {
        params.ispassscreening = 1;
      } else if (this.queryParams.passStatus === '未通过') {
        params.ispassscreening = 0;
      }

      // 处理模糊查询
      if (this.queryParams.fuzzylookup) {
        // 身份证号验证正则（支持15位和18位）
        const idCardPattern = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/;

        if (idCardPattern.test(this.queryParams.fuzzylookup)) {
          // 如果是身份证号
          params.idcard = this.queryParams.fuzzylookup;
        } else {
          // 否则认为是姓名
          params.name = this.queryParams.fuzzylookup;
        }
      }

      getqualitycontrol(params).then(response => {
        this.testPeopleList = response.data || [];
        this.total = response.count || 100;
        this.loading = false;
      }).catch(() => {
        this.loading = false;
      });
    },

    /** 切换左侧面板显示/隐藏 */
    toggleLeftPane() {
      if (this.leftPaneSize === 0) {
        this.leftPaneSize = 16;
      } else {
        this.leftPaneSize = 0;
      }
    },

    /** 处理输入框获取焦点事件 */
    handleInputFocus() {
      this.leftPaneSize = 16;
    },

    // 筛选节点
    filterNode(value, data) {
      if (!value) return true;
      return data.label.indexOf(value) !== -1;
    },

    // 节点单击事件
    handleNodeClick(data) {
      this.queryParams.deptId = data.id;
      this.selectedNodeInfo = data.label;
      this.leftPaneSize = 0;
      this.$refs.queryForm.clearValidate(['deptId']);
    },

    // 日期范围变化事件
    handleDateChange(val) {
      if (val && val.length === 2) {
        this.queryParams.startDate = val[0];
        this.queryParams.endDate = val[1];

        const startDate = new Date(val[0]);
        const endDate = new Date(val[1]);

        if (startDate.getFullYear() !== endDate.getFullYear()) {
          this.$message.error('错误：开始日期和结束日期必须在同一年内！');
          this.queryParams.dateRange = [];
          this.queryParams.startDate = null;
          this.queryParams.endDate = null;
          this.startYear = null; // 清除年份限制
        } else {
          this.startYear = startDate.getFullYear(); // 设置当前选择的年份
          this.$refs.queryForm.clearValidate(['dateRange']);
        }
      } else {
        // 当清空选择时，重置所有相关变量
        this.queryParams.startDate = null;
        this.queryParams.endDate = null;
        this.queryParams.dateRange = null;
        this.startYear = null; // 重要：清除年份限制
      }
    },

    // 人群选择变化时重置年龄组和城乡工作种类
    handlePopulationChange() {
      this.queryParams.ageGroup = null;
      this.queryParams.urbanRuralType = '全部';

      // 如果选择了"全部"，则获取所有年龄组
      if (this.queryParams.populationType === 'all') {
        this.getAgeGroups('all');
      }
    },

    // 年龄组选择变化事件
    handleAgeGroupChange(value) {
      if (value) {
        const selectedAgeGroup = this.ageGroupOptions.find(item => item.id === value);
        if (selectedAgeGroup) {
          this.queryParams.ageMin = selectedAgeGroup.agemin;
          this.queryParams.ageMax = selectedAgeGroup.agemax;
        }
      } else {
        const selectedPopulation = this.populationOptions.find(item => item.id === this.queryParams.populationType);
        if (selectedPopulation) {
          this.queryParams.ageMin = selectedPopulation.peopleagemin;
          this.queryParams.ageMax = selectedPopulation.peopleagemax;
        }
      }
    },

    /** 搜索按钮操作 */
    handleQuery() {
      this.$refs.queryForm.validate(valid => {
        if (valid) {
          this.queryParams.pageNum = 1;
          this.getList();
        }
      });
    },

    /** 重置按钮操作 */
    resetQuery() {
      this.queryParams = {
        pageNum: 1,
        pageSize: 10,
        deptId: null,
        passStatus: '全部',
        dateRange: null,
        startDate: null,
        endDate: null,
        populationType: null,
        ageGroup: null,
        urbanRuralType: '全部',
        gender: '',
        ageMin: null,
        ageMax: null,
        fuzzylookup: '' // 重置模糊查询参数
      };
      this.selectedNodeInfo = '';
      this.startYear = null; // 清除年份限制
      this.ageGroupOptions = [];
      this.$refs.tree.setCurrentKey(null);
      this.$nextTick(() => {
        this.$refs.queryForm.clearValidate();
      });
    },

    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.id);
      this.single = selection.length !== 1;
      this.multiple = !selection.length;
    },

    /** 查看详情按钮操作 */
    handleDetail(row) {
      // 获取接口返回的校验结果数据
      getqualityresult(row).then(response => {
        console.log("接口返回校验数据", response);
        let c = response; // 校验结果（1=通过，0=未通过）
        let b = row; // 当前行的人员基础数据（含测试值）
        let aa = []; // 匹配的年龄组指标模板
        const testAge = row.testage; // 人员测试年龄
        const gender = row.sex; // 人员性别
        const isChild = testAge >= 3 && testAge < 7; // 判断是否为幼儿

        // 按年龄分组匹配静态指标模板
        if (testAge >= 60 && testAge < 80) {
          // 老年人指标模板
          aa = [
            {"shengaoval":"身高","type":"A"},{"tizhongval":"体重","type":"A"},{"tzzsval":"体重指数","type":"A"},{"yaoweival":"围度_腰围","type":"A"},{"tunweival":"围度_臀围","type":"A"},{"tzlval":"体脂率","type":"A"},{"fhlval":"肺活量","type":"A"},{"lfzydgttzval":"2分钟原地高抬腿_左腿","type":"A"},{"lfzydgttyval":"2分钟原地高抬腿_右腿","type":"A"},{"lfzydgttval":"2分钟原地高抬腿得分","type":"A"},{"wolival":"握力","type":"A"},{"zwtqqval":"坐位体前屈","type":"A"},{"bydjzlval":"闭眼单脚站","type":"A"},{"xzfysval":"选择反应时","type":"A"},{"ssmzzval":"30秒坐站","type":"A"},{"systolicpressure":"收缩压","type":"B"},{"diastolicpressure":"舒张压","type":"B"},{"heartrate":"心率","type":"B"},{"qztzShicezhi":"去脂体重的实测值（千克）","type":"D"},{"tzflShicezhi":"体脂肪量的实测值（千克）","type":"D"},{"stjrlShicezhi":"身体肌肉量的实测值（千克）","type":"D"},{"zszjrlShicezhi":"左上肢肌肉量的实测值（千克）","type":"D"},{"yszjrlShicezhi":"右上肢肌肉量的实测值（千克）","type":"D"},{"qgjrlShicezhi":"躯干肌肉量的实测值（千克）","type":"D"},{"zxzjrlShicezhi":"左下肢肌肉量的实测值（千克）","type":"D"},{"yxzjrlShicezhi":"右下肢肌肉量的实测值（千克）","type":"D"},{"qgzflShicezhi":"躯干脂肪量的实测值（千克）","type":"D"},{"zfljgFatW":"脂肪率结果的FAT/W（%）","type":"D"},{"yaoweitunwei":"腰臀比","type":"E"},{"maiyacha":"脉压差","type":"E"},{"shengaotizhong":"身高、体重","type":"E"},{"shengaofhl":"身高与肺活量","type":"E"},{"shengaowoli":"身高与握力","type":"E"},{"tizhongfhl":"体重与肺活量","type":"E"},{"tizhongwoli":"体重与握力","type":"E"},{"yaoweishengaotizhong":"腰围/身高与体重","type":"E"},{"tunweishengaotizhong":"臀围/身高与体重","type":"E"}
          ];
        } else if (testAge >= 20 && testAge < 60) {
          // 成年人指标模板 - 基础模板
          let adultTemplate = [
            {"shengaoval":"身高","type":"A"},{"tizhongval":"体重","type":"A"},{"tzzsval":"体重指数","type":"A"},{"yaoweival":"围度_腰围","type":"A"},{"tunweival":"围度_臀围","type":"A"},{"tzlval":"体脂率","type":"A"},{"fhlval":"肺活量","type":"A"},{"glcval":"功率车二级负荷试验","type":"A"},{"wolival":"握力","type":"A"},{"zongtiaoval":"纵跳","type":"A"},
            {"zwtqqval":"坐位体前屈","type":"A"},{"bydjzlval":"闭眼单脚站","type":"A"},{"xzfysval":"选择反应时","type":"A"},{"beilival":"背力","type":"A"},{"systolicpressure":"收缩压","type":"B"},{"diastolicpressure":"舒张压","type":"B"},{"heartrate":"心率","type":"B"},{"metval":"MET","type":"C"},{"absoluteval":"绝对值","type":"C"},{"relativeval":"相对值","type":"C"},{"qztzShicezhi":"去脂体重的实测值（千克）","type":"D"},{"tzflShicezhi":"体脂肪量的实测值（千克）","type":"D"},{"stjrlShicezhi":"身体肌肉量的实测值（千克）","type":"D"},{"zszjrlShicezhi":"左上肢肌肉量的实测值（千克）","type":"D"},{"yszjrlShicezhi":"右上肢肌肉量的实测值（千克）","type":"D"},{"qgjrlShicezhi":"躯干肌肉量的实测值（千克）","type":"D"},{"zxzjrlShicezhi":"左下肢肌肉量的实测值（千克）","type":"D"},{"yxzjrlShicezhi":"右下肢肌肉量的实测值（千克）","type":"D"},{"qgzflShicezhi":"躯干脂肪量的实测值（千克）","type":"D"},{"zfljgFatW":"脂肪率结果的FAT/W（%）","type":"D"},{"yaoweitunwei":"腰臀比","type":"E"},{"maiyacha":"脉压差","type":"E"},{"shengaotizhong":"身高、体重","type":"E"},{"shengaofhl":"身高与肺活量","type":"E"},{"shengaowoli":"身高与握力","type":"E"},{"shengaobeili":"身高与背力","type":"E"},{"tizhongfhl":"体重与肺活量","type":"E"},{"tizhongwoli":"体重与握力","type":"E"},{"tizhongbeili":"体重与背力","type":"E"},{"yaoweishengaotizhong":"腰围/身高与体重","type":"E"},{"tunweishengaotizhong":"臀围/身高与体重","type":"E"}
          ];

          // 根据性别添加不同的测试项目
          if (gender === '男') {
            // 男性添加俯卧撑，不添加跪卧撑
            adultTemplate.splice(8, 0, {"fwcval":"俯卧撑","type":"A"});
          } else if (gender === '女') {
            // 女性添加跪卧撑，不添加俯卧撑
            adultTemplate.splice(8, 0, {"gwcval":"跪卧撑","type":"A"});
          } else {
            // 未知性别同时显示两个项目
            adultTemplate.splice(8, 0, {"fwcval":"俯卧撑","type":"A"}, {"gwcval":"跪卧撑","type":"A"});
          }

          // 添加仰卧起坐项目
          adultTemplate.splice(9, 0, {"yfzywqzval":"1分钟仰卧起坐","type":"A"});

          aa = adultTemplate;
        } else if (testAge >= 3 && testAge < 7) {
          // 幼儿指标模板 - 不包含收缩压和舒张压
          aa = [
            {"shengaoval":"身高","type":"A"},{"zuogaoval":"坐高","type":"A"},{"tizhongval":"体重","type":"A"},{"tzzsval":"体重指数","type":"A"},{"xiongweival":"围度_胸围","type":"A"},{"ajxlval":"静态心率","type":"A"},{"tzlval":"体脂率","type":"A"},{"wolival":"握力","type":"A"},{"ldtyval":"立定跳远","type":"A"},{"zwtqqval":"坐位体前屈","type":"A"},{"sjlxtval":"双脚连续跳","type":"A"},{"swmrzapval":"15米障碍跑","type":"A"},{"zphmval":"平衡木","type":"A"},{"heartrate":"心率","type":"C"},{"qztzShicezhi":"去脂体重的实测值（千克）","type":"D"},{"tzflShicezhi":"体脂肪量的实测值（千克）","type":"D"},{"stjrlShicezhi":"身体肌肉量的实测值（千克）","type":"D"},{"zszjrlShicezhi":"左上肢肌肉量的实测值（千克）","type":"D"},{"yszjrlShicezhi":"右上肢肌肉量的实测值（千克）","type":"D"},{"qgjrlShicezhi":"躯干肌肉量的实测值（千克）","type":"D"},{"zxzjrlShicezhi":"左下肢肌肉量的实测值（千克）","type":"D"},{"yxzjrlShicezhi":"右下肢肌肉量的实测值（千克）","type":"D"},{"qgzflShicezhi":"躯干脂肪量的实测值（千克）","type":"D"},{"zfljgFatW":"脂肪率结果的FAT/W（%）","type":"D"},{"sgzg":"身高/坐高 ","type":"E"},{"shengaotizhong":"身高、体重","type":"E"},{"shengaozuogao":"身高坐高","type":"E"}
          ];
        } else {
          this.$message.warning("测试年龄不在3-80岁范围内，无法展示详情");
          return;
        }

        // 数据整合：按type匹配测试值和校验状态
        let d = aa.map(item => {
          const titleKey = Object.keys(item)[0]; // 取指标键（如shengaoval）
          const title = Object.values(item)[0]; // 取指标名（如身高）
          let value = "";
          let check = undefined;
          const checkKey = titleKey.slice(0, -3); // 去掉"val"后缀（如shengao）

          // 确保check值正确获取，兼容字符串和数字类型
          if (item.type !== "E") {
            // A/B/C/D类型：处理测试值和校验状态
            value = b[titleKey] || ""; // 从行数据取测试值

            // 处理不同类型的校验状态获取逻辑
            if (item.type === "B") {
              // B类型用原键取校验状态，确保转换为数字
              check = c[titleKey] !== undefined ? Number(c[titleKey]) : undefined;
            } else if (item.type === "C") {
              check = undefined; // C类型无校验状态
              value = ""; // C类型清空测试值
            } else if (item.type === "D") {
              value = ""; // D类型清空测试值（如体脂率相关）
              // D类型用截取后键取校验状态，确保转换为数字
              check = c[checkKey] !== undefined ? Number(c[checkKey]) : undefined;
            } else {
              // A类型用截取后键取校验状态，确保转换为数字
              check = c[checkKey] !== undefined ? Number(c[checkKey]) : undefined;
            }
          } else {
            // E类型：仅处理校验状态（无测试值），确保转换为数字
            check = c[titleKey] !== undefined ? Number(c[titleKey]) : undefined;
            value = "";
          }

          // 处理特殊值：65534替换为"放弃测试"
          if (value === 65534) value = "放弃测试";

          return { title, value, check };
        });

        // 严格过滤：只保留check为0或1的项目
        const filteredData = d.filter(item => {
          // 只保留check明确为0或1的项目
          return item.check === 0 || item.check === 1;
        });

        // 如果没有数据，显示提示信息
        if (filteredData.length === 0) {
          this.$message.info("没有有效的测试数据可显示");
          return;
        }

        // 准备弹窗数据
        this.detailData = {
          name: row.realname,
          idCard: row.idcard,
          gender: row.sex,
          age: row.testage,
          testSite: row.mechanismname,
          items: filteredData.map(item => ({
            title: item.title,
            value: item.value,
            check: item.check === 1 ? '通过' : '未通过'
          }))
        };

        // 显示弹窗
        this.detailDialogVisible = true;
      }).catch(error => {
        console.error("获取详情失败", error);
        this.$message.error("详情加载失败，请重试");
      });
    }
  },
  created() {
    this.getDeptTree();
    this.getPopulationTypes();


  }
};
</script>

<style scoped lang="scss">
.app-container {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
  overflow: hidden;
  background: url('../../assets/images/bgn.png');
  background-size: 100% 100%;
  padding: 16px;
  box-sizing: border-box;
  padding-top: 0;
}

.main-container {
  position: relative;
  width: 100%;
  overflow: hidden;
}

/* 左侧面板样式 */
.left-panel {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  background-color: #0160FA;
  box-shadow: 2px 0 10px rgba(0, 0, 0, 0.1);
  z-index: 10;
  transition: width 0.3s ease;
  overflow: auto;
  padding: 16px;
  box-sizing: border-box;
}

.left-panel.hidden {
  width: 0 !important;
  padding: 0;
}

/* 右侧面板样式 */
.right-panel {
  width: 100%;
  height: 100%;
  padding-left: 0;
  transition: padding-left 0.3s ease;
  box-sizing: border-box;
  overflow: auto;
}

/* 切换按钮样式 */
.toggle-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 10px;
  height: 30px;
  background-color: rgba(0,128,255,0.3);
  border: 1px solid #0080ff;
  border-radius: 0 4px 4px 0;
  cursor: pointer;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  transition: left 0.3s ease;
}

.toggle-btn i {
  color: #fff;
  font-size: 10px;
}

/* 表单样式调整 */
.search-form {
  .el-form-item {
    margin-right: 20px;
    margin-bottom: 18px;
  }

  .el-form-item__label {
    white-space: nowrap;
    padding-right: 8px;
    color: #fff!important;
  }
  ::v-deep .el-form-item__label {
    color: #fff;
  }
  .el-input, .el-select, .el-date-editor {
    width: 220px;
  }

  .el-date-editor.el-input, .el-date-editor.el-input__inner {
    width: 260px;
  }
}

/* 表格容器 - 添加flex:1 */
.table-container {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* 树机构样式修改  */
::v-deep .el-tree {
  background: #0080FF;
  color: #fff;
  border-radius: 8px;
}
::v-deep .el-tree-node__content:hover {
  background-color: #0879e9;
}
::v-deep .el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content {
  background-color: #0879e9;
}

/* 表格整体容器 */
::v-deep .el-table {
  background: transparent;
  border-radius: 12px;
  overflow: hidden;
  flex: 1;
  display: flex;
  flex-direction: column;

  /* 表头和表格体容器 */
  .el-table__header-wrapper,
  .el-table__body-wrapper {
    flex-shrink: 0;
  }

  /* 表格体容器 - 添加flex:1使其占据剩余空间 */
  .el-table__body-wrapper {
    flex: 1;
    overflow: auto;
  }

  /* 表头圆角 */
  .el-table__header-wrapper {
    border-radius: 12px;
  }

  /* 表格行圆角 */
  .el-table__body-wrapper {
    border-radius: 0 0 12px 12px;

    tr {
      td:first-child {
        border-bottom-left-radius: 12px;
      }
      td:last-child {
        border-bottom-right-radius: 12px;
      }
    }

    /* 为每一行添加圆角 */
    tr.el-table__row {
      td:first-child {
        border-top-left-radius: 12px;
        border-bottom-left-radius: 12px;
      }
      td:last-child {
        border-top-right-radius: 12px;
        border-bottom-right-radius: 12px;
      }
    }
  }
}
/* 确保表头单元格没有边框干扰圆角 */
::v-deep .el-table th.el-table__cell {
  border: none;
}
.el-table::before{
  height: 0;
}
::v-deep .el-table th.el-table__cell.is-leaf{
  border-bottom: none;
}
/* 表头 - 深蓝到青绿，柔和渐变 */
::v-deep .el-table th {
  background: #f7e797;
  color: #1e4f91; // 更深的蓝
  font-weight: bold;
  font-size: 18px;
  height: 30px;
  line-height: 30px;
}
/* 奇偶行 - 亮蓝与浅青 */
::v-deep .el-table__row {
  td {
    border: none; /* 移除单元格边框 */
  }
}

/* 奇偶行 - 亮蓝与浅青 */
::v-deep .el-table__row:nth-child(odd) {
  background: linear-gradient(90deg, #99e8ff, #4f85ff);
}
::v-deep .el-table__row:nth-child(even) {
  background: linear-gradient(90deg, #4f85ff, #99e8ff);
}

/* 单元格文字 */
::v-deep .el-table td {
  color: #000; /* 深灰色，更易读 */
  font-size: 18px;
  padding: 12px 8px;
}
::v-deep .el-table__body {
  border-collapse: separate !important;
  border-spacing: 0 5px !important;
}
/* 鼠标悬停 - 橙黄渐变 */
::v-deep .el-table__body tr:hover > td {
  background: #9ef7c5!important;
}

/* 操作栏按钮文字颜色 - 黑色 */
::v-deep .el-table .el-button--mini {
  color: #000 !important; /* 文字颜色改为纯黑 */
  font-size: 18px;
  font-weight: 400;
}
::v-deep .el-table .cell{
  line-height: 35px;
  height: 35px;
}

/* 美化 el-input 输入框 */
::v-deep .el-input .el-input__inner {
  background-color: rgba(255, 255, 255, 0.1); /* 半透明白背景 */
  border: 1px solid #00CCFE; /* 柔和的蓝色边框 */
  border-radius: 6px;
  color: #f0f0f0;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
  font-size: 16px;
}

/* 输入框 placeholder 颜色改为 #fff */
::v-deep .el-input__inner::placeholder {
  color: #fff !important;
}

/* 输入框获得焦点时边框高亮 */
::v-deep .el-input .el-input__inner:focus {
  border-color: #409eff; /* element-ui 默认蓝色 */
  box-shadow: 0 0 5px rgba(64, 158, 255, 0.6);
  background-color: rgba(255, 255, 255, 0.15);
  color: #fff;
}

/* 清除按钮的颜色调整 */
::v-deep .el-input__clear {
  color: #a8c0ff;
}

/* 清除按钮 hover 颜色 */
::v-deep .el-input__clear:hover {
  color: #409eff;
}

/* 搜索区按钮美化 - 调大尺寸 */
::v-deep .el-form-item .el-button {
  border-radius: 22px;
  font-weight: 600;
  font-size: 16px;       /* 字号变大 */
  padding: 10px 20px;    /* 内边距加大 */
  transition: all 0.3s ease;
  box-shadow: 0 3px 8px rgba(66, 133, 244, 0.3);
}

/* 通用按钮基础样式 */
.el-button {
  font-size: 14px;
  padding: 10px 20px; /* 比默认稍大 */
  border-radius: 8px;
  font-weight: 500;
  transition: all 0.25s ease;
}

/* 调整表单里的按钮间距 */
::v-deep .el-form-item .el-button {
  margin-left: 12px; /* 你可以改成 16px 更宽松 */
}
/* 按钮通用样式（不改尺寸） */
::v-deep .el-form-item .action-btn {
  border-radius: 20px; /* 圆润 */
  font-weight: 600;
  border: none;
  transition: all 0.3s ease;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15);
}

/* 悬浮时按钮微微上浮 + 光晕 */
::v-deep .el-form-item .action-btn:hover {
  transform: translateY(-2px);
}

/* 搜索按钮 - 宝石蓝渐变 */
::v-deep .el-form-item .search-btn {
  background: linear-gradient(135deg, #b4cdeb, #2f6bcc);
  color: #fff;
}
::v-deep .el-form-item .search-btn:hover {
  background: linear-gradient(135deg, #5aa2f8, #3a8ef6);
  box-shadow: 0 6px 14px rgba(58, 142, 246, 0.5);
}

/* 重置按钮 - 高级灰蓝 */
::v-deep .el-form-item .reset-btn {
  background: linear-gradient(135deg, #df9f3f, #edc73d);
  color: #fff;
}
::v-deep .el-form-item .reset-btn:hover {
  background: linear-gradient(135deg, #ffcc80, #ffb74d);
  box-shadow: 0 6px 14px rgba(255, 183, 77, 0.5);
}

/* 美化日期选择框 */
::v-deep .el-date-editor {
  background-color: rgba(255, 255, 255, 0.1) !important;
  border: 1px solid #00CCFE !important;
  border-radius: 6px;
  color: #f0f0f0 !important;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

::v-deep .el-date-editor:hover {
  border-color: #409eff !important;
}

::v-deep .el-date-editor .el-range-input {
  background-color: transparent !important;
  color: #fff !important;
}

::v-deep .el-date-editor .el-range-separator {
  color: rgba(255, 255, 255, 0.8) !important;
}

/* 日期选择框 placeholder 颜色改为白色 */
::v-deep .el-date-editor .el-range-input::placeholder {
  color: #fff !important;
}

/* 单个日期选择框（非范围） placeholder 颜色 */
::v-deep .el-date-editor input::placeholder {
  color: #fff !important;
}

/*css主要部分的样式*/
/*定义滚动条宽高及背景，宽高分别对应横竖滚动条的尺寸*/
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

/*定义滚动条的轨道颜色、内阴影及圆角*/
::-webkit-scrollbar-track{
  border-radius: 4px;
  background-color: rgb(1 96 250);
}

/*定义滑块颜色、内阴影及圆角*/
::-webkit-scrollbar-thumb{
  border-radius: 8px;
  background-color: #0080ff;
}

/*定义滑块悬停变化颜色、内阴影及圆角*/
::-webkit-scrollbar-thumb:hover{
  background-color: #C7C9CC;
}
::v-deep {

  .is-horizontal {
    height: 0px;
    left: 0px;
    display: none;
  }

}
/* 分页栏美化 */
::v-deep .pagination {
  margin-top: 16px;
  padding: 10px 0;
  background-color: #f8fbff;
  border-radius: 8px;
}
::v-deep .pagination-container{
  background: transparent;
}
::v-deep .el-pagination{
  color: #fff!important;
}
::v-deep .el-pagination__total{
  color: #fff!important;
}
::v-deep .el-pagination__jump{
  color: #fff!important;
}
::v-deep .el-pagination.is-background .el-pager li{
  background-color:#568eff;
  color: #fff!important;
}
/* 关键样式：调整输入框高度为36px */
::v-deep .custom-form .el-input__inner {
  height: 36px!important;
  line-height: 36px!important;
}

/* 详情弹窗样式 */
::v-deep .detail-dialog {
  border-radius: 12px;
  overflow: hidden;

  .el-dialog__header {
    background: linear-gradient(90deg, #4f85ff, #99e8ff);
    padding: 15px 20px;
    border-bottom: 1px solid #e6ebf5;

    .el-dialog__title {
      color: #fff;
      font-size: 18px;
      font-weight: bold;
    }

    .el-dialog__headerbtn {
      top: 15px;

      .el-dialog__close {
        color: #fff;
        font-size: 20px;
      }
    }
  }

  .el-dialog__body {
    padding: 20px;
    background-color: #f5f7fa;
  }

  .el-dialog__footer {
    padding: 15px 20px;
    background-color: #f5f7fa;
    border-top: 1px solid #e6ebf5;
    text-align: center;
  }

  /* 弹窗内单独定义滚动条样式 */
  .table-scroll-container::-webkit-scrollbar {
    width: 8px;
    height: 8px;
  }

  .table-scroll-container::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 4px;
  }

  .table-scroll-container::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 4px;
  }

  .table-scroll-container::-webkit-scrollbar-thumb:hover {
    background: #a8a8a8;
  }
}

.detail-content {
  .basic-info {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 10px;
    padding: 12px;
    background-color: transparent;
    border-radius: 8px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);

    .info-item {
      flex: 0 0 33%;
      margin-bottom: 10px;
      font-size: 16px;

      .info-label {
        color: #000000;
        font-weight: bold;
      }

      .info-value {
        color: #000000;
        font-weight: bold;
      }
    }
  }

  .table-scroll-container {
    max-height: calc(70vh - 100px);
    overflow-y: auto;
    background-color: transparent;
    border-radius: 8px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  }
}

.dialog-footer {
  .el-button {
    min-width: 100px;
    border-radius: 20px;
    font-weight: 500;
  }
}
/* 对话框整体样式 - 添加渐变背景 */
::v-deep .custom-dialog {
  border-radius: 16px !important;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
  background: linear-gradient(145deg, #f5f7fa, #e4e8f0);

  .el-dialog__header {
    background: linear-gradient(90deg, #8caefb, #0160FA);
    padding: 30px;
    margin: 0;
    border-bottom: none;

    .el-dialog__title {
      color: #fff;
      font-size: 20px;
      font-weight: 600;
      letter-spacing: 1px;
    }

    .el-dialog__headerbtn {
      top: 20px;
      right: 20px;

      .el-dialog__close {
        color: #fff;
        font-size: 20px;
      }
    }
  }

  /* 修改body部分为渐变 */
  .el-dialog__body {
    padding: 15px 10px 15px 10px;
    background: linear-gradient(145deg, #e6f0ff, #bad2ff);
    color: #333; /* 文字颜色调整 */
  }

  /* 修改footer部分为渐变 - 与body同色系但略深 */
  .el-dialog__footer {
    padding: 12px 40px;
    background: linear-gradient(145deg, #e6f0ff, #a2c3ff);
    border-top: 1px solid rgba(79, 133, 255, 0.1); /* 半透明分割线 */
    border-radius: 0 0 16px 16px;
  }
}
/* 分页栏美化 */
::v-deep .pagination {
  margin-top: 16px;
  padding: 10px 0;
  background-color: #f8fbff;
  border-radius: 8px;
}
::v-deep .pagination-container{
  background: transparent;
}
::v-deep .el-pagination{
  color: #fff!important;
}
::v-deep .el-pagination__total{
  color: #fff!important;
}
::v-deep .el-pagination__jump{
  color: #fff!important;
}
::v-deep .el-tree-node:focus > .el-tree-node__content {
  background-color: transparent;
}
::v-deep .cell .el-tag{
  font-size: 14px;
  font-weight: bold;
}
</style>
